import React, { useContext } from 'react';
import { LowCodeDesignerContext } from './Provider';
import DesignerToolbar from './Toolbar';
const DesignerActionBar = React.memo(({ config, children }: any) => {
  const { currentDesigner, setCurrentDesigner } = useContext(LowCodeDesignerContext);
  const checked = currentDesigner?._id == config._id

  return (<div
    className="design-toolbar"
    style={{
      border: checked ? '1px solid  blue' : '1px dashed #ccc',

    }}
    onClick={(e) => {
      setCurrentDesigner(config)
      e.stopPropagation()
    }} >
    {children}
    {checked && !currentDesigner?.disableDesignerToolbar ? <DesignerToolbar item={config} /> : null}
  </div>)
})
export default DesignerActionBar